<template>
  <div class="login" v-show="show==1">
    <p @click="getlogin">×</p>
    <div style="padding:150px 30px 0px 30px" v-show="login==1">
      <el-input placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone" v-model="text">
      </el-input>
      <el-input placeholder="密码" prefix-icon="el-icon-s-goods" v-model="password" :show-password="true">
      </el-input>
      <el-button type="danger" style="background-color:rgb(192, 29, 29);width: 100%;margin-top: 30px;margin-bottom: 10px;" @click="getloginaccount">登录</el-button>
      <a href="#" style="color:black; margin-left: 125px;" @click="changeover">注册</a>
    </div>
    <div style="padding:100px 30px 0px 30px" v-show="login==2">
      <el-input placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone" v-model="text1">
      </el-input>
      <el-input placeholder="设置登录密码" prefix-icon="el-icon-s-goods" v-model="password1" :show-password="true">
      </el-input>
      <el-input placeholder="请输入昵称" prefix-icon="el-icon-user-solid" v-model="nickname">
      </el-input>
      <el-input v-model="input" placeholder="请输入验证码">
      </el-input>
      <el-button type="primary" style="float: right;;" size="mini" @click="blur">发送验证码</el-button>
      <el-button type="danger" style="background-color:rgb(192, 29, 29);width: 100%;margin-top: 30px;margin-bottom: 10px;" @click="getverify">注册</el-button>
      <a href="#" style="color:black; margin-left: 125px;" @click="changeover2">登录</a>
    </div>
  </div>
</template>

<script>
import Bus from '@/components/eventBus'
import { mapState } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      //设置登录注册框
      show: 2,
      //手机号
      text: '',
      //密码
      password: '',
      //注册手机号
      text1: '',
      //注册密码
      password1: '',
      //验证码
      input: '',
      //昵称
      nickname: '',
      //注册和登录的切换
      login: 1
    }
  },
  computed: {
    ...mapState({
      //注册账号从vuex获取数据到组件上，然后根据这个数据来跳转到登录页面
      loginlist: state => state.Home.loginlist,
      //登录账号成功后从vuex获取到的数据，然后根据这个数据来把登录页面关闭
      Loginaccount: state => state.Home.Loginaccount
    })
  },
  methods: {
    //关闭登录注册框
    getlogin() {
      this.show = 2
    },
    //切换注册
    changeover() {
      this.login = 2
    },
    //切换登录
    changeover2() {
      this.login = 1
    },
    //发送验证码时验证手机号是否正确
    blur() {
      let res = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
      if (this.text1 == '') {
        this.$message({ message: '请输入手机号', duration: 1000 })
      } else if (!res.test(this.text1)) {
        this.$message({ message: '请输入正确格式的手机号', duration: 1000 })
      } else {
        this.$store.dispatch('getVerificationList', this.text1)
      }
    },
    //点击注册按钮，向服务端发送注册请求
    getverify() {
      let res = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,20}$/
      this.$store.dispatch('getVerifycorrectList', { phone: this.text1, captcha: this.input })
      if (res.test(this.password1)) {
        this.$store.dispatch('getRegisteredaccountList', { captcha: this.input, phone: this.text1, password: this.password1, nickname: this.nickname })
      } else {
        this.$message({ message: '请输入正确格式的密码', duration: 1000 })
      }
    },
    //登录账号
    getloginaccount() {
      this.$store.dispatch('getLoginaccountList', { phone: this.text, password: this.password })
      setTimeout(() => {
        this.show = this.Loginaccount
        this.$router.push({ path: '/home/recommend' })
        //从本地存储拿到这些值，并赋值变量,随便把变量发给head组件，把登录账号的信息和头像渲染到页面上去
        let nickname = localStorage.getItem('nickname')
        let imgurl = localStorage.getItem('avatarUrl')
        let loginType = localStorage.getItem('loginType')
        Bus.$emit('transmitlist', nickname, imgurl, loginType)
      }, 1000)
    }
  },
  created() {
    //接收head组件传过来的值，来控制登录面板的显示
    Bus.$on('passbyvalue', val => {
      this.$message({ message: '正在加载登录页...', duration: 1000 })
      setTimeout(() => {
        this.show = val
      }, 1000)
    })
  }
}
</script>

<style lang="less" scoped>
.login {
  background-image: url(@/assets/pexels-stijn-dijkstra-13008665.jpg);
  width: 350px;
  height: 500px;
  background-color: rgb(250, 252, 252);

  p {
    float: right;
    margin-right: 6px;
    margin-top: -2px;
    font-size: 30px;
    color: rgba(122, 123, 124, 0.71);
  }
  p:hover {
    color: black;
    cursor: pointer;
  }
}
</style>